<template>
  <div>
    <el-row :gutter="18" class="panel-group">
      <el-col :span="6" class="content">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="card-order">线上总推广订单</span>
            </div>
            <count-to :start-val="0" :end-val="userInfo.onLine" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="content" style="border:none">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="card-order">地推总订单</span>
            </div>
            <count-to :start-val="0" :end-val="userInfo.ground" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="content" style="border:none">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="card-order">本月线上总订单</span>
            </div>
            <count-to :start-val="0" :end-val="userInfo.monthOnLine" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="content" style="border:none">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="card-order">本月地推总订单</span>
            </div>
            <count-to :start-val="0" :end-val="userInfo.monthGround" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="btn"><el-button type="primary" @click="close">关闭</el-button></div>
  </div>
</template>

<script>

import { treamDetailStatsticApi } from '@/api/user'
import CountTo from "vue-count-to";
export default {
  name: 'UserDetails',
  components: {
    CountTo
  },
  props: {
    uid: {
      type: Number,
      default: null
    },
  },
  data() {
    return {
      userInfo: {
        onLine: 0,
        ground: 0,
        monthOnLine: 0,
        monthGround: 0
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      treamDetailStatsticApi(this.uid).then((res) => {
        this.userInfo = res.data
      })
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.grid-content {
  padding: 16px 0;
  text-align: center;
  background: #e0faf8;

  .title {
    font-size: 20px;
    font-weight: bold;
    color: rgba(42, 133, 217, 0.8);
  }

  .num {
    font-size: 16px;
    font-weight: bold;
    margin-top: 24px;
  }
}

.btn {
  display: flex;
  justify-content: right;
  margin-top: 150px;
}

.statistics {
  min-width: 700px;
}

.up,
.el-icon-caret-top {
  color: #F5222D;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39C15B;
  font-size: 12px;
  opacity: 1;
}

.header {
  &-title {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
  }

  &-time {
    font-size: 12px;
    color: #8C8C8C;
  }
}

.card-panel {
  height: 177px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  color: #8C8C8C;
  background: #f4f4f4;
  position: relative;
}

.card-panel-description {
  padding: 0 20px;
  margin-top: 19px;

  .card-panel-text {
    line-height: 18px;
    margin-bottom: 12px;
    font-weight: normal;
    align-items: center;
    justify-content: space-between;
    display: flex;

    .card-order {
      color: #303133;
      font-size: 16px;
    }

    .card-date {
      border: 1px solid #6394F9;
      border-radius: 3px;
      color: #6394F9;
      background: #F4F7FF;
      text-align: center;
      line-height: 20px;
      width: 38px;
    }
  }

  .card-panel-num {
    font-size: 30px;
    color: #000;
    font-weight: bold;
  }
}

.card-panel-compared {
  margin: 15px 0;
}

.card-panel-date {
  border-top: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
}

.content {
  &-is {
    opacity: 1%;
  }

  &-title {
    font-size: 14px;
    color: #000000;
    margin-bottom: 5px;
  }

  &-time {
    font-size: 12px;
    color: #8C8C8C;
    margin-bottom: 5px;
  }

  &-number {
    font-size: 30px;
  }

  .content-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.panel-group-count {
  margin-top: 18px;

  .card-panel-item {
    float: left;
  }

  .card-panel-count {
    background-color: #ffffff;
    border-radius: 4px;
    // width: 90%;
    height: 104px;
    text-align: center;
    padding-top: 20px;

    span {
      display: block;
    }

    .iconfont {
      font-size: 27px;
    }

    .panel-text {
      font-size: 14px;
      color: #303133;
      margin-top: 15px;
    }
  }
}
</style>
